import { input, select } from '@inquirer/prompts'
import choices from './data/index.ts'
import clipboard from 'clipboardy'
import chalk from 'chalk' //版本必须使用4才能在ts和termal中使用
import boxen from 'boxen'
async function main() {
  try {
    const answer = await select({
      message: '选择你要生成的CSS片段',
      choices
    })
    // 选择片段类型（优惠券、三角形等）
    const selectQuestion = choices.find((v) => v.value === answer)
    const { options, codeSnippet } = selectQuestion
    // 循环输出选择或输入的值
    const answers = []
    for (let i = 0; i < options.length; i++) {
      const item = options[i]
      let selectValue = ''
      if (item.type === 'input') {
        selectValue = await input({
          message: item.message,
          default: item.default
        })
      }
      if (item.type === 'select') {
        selectValue = await select({
          message: item.message,
          choices: item.choices
        })
      }
      answers.push({ id: i + 1, selectValue, ...item })
    }
    // 将需要前置的片段优先处理
    // 比如一个选择需要处理的值是 background-position: {{q6}}
    // 里面包含了其他的参数，优先替换到主片段，然后其他参数替换时才能正常替换所有参数
    answers.sort((a, b) => b.prepose - a.prepose)
    let newCodeSnippte = codeSnippet

    // 根据条件对代码片段进行输入值替换
    answers.forEach((item) => {
      const replaceBlock = `{{q${item.id}}}`
      if (item.type === 'select') {
        const selectItem =
          item.choices.find((v) => v.value === item.selectValue) || {}
        newCodeSnippte = newCodeSnippte.replace(
          new RegExp(replaceBlock, 'g'),
          selectItem.codeSnippet || ''
        )
      }
      if (item.type === 'input') {
        newCodeSnippte = newCodeSnippte.replace(
          new RegExp(replaceBlock, 'g'),
          item.selectValue || ''
        )
      }
    })
    clipboard.writeSync(newCodeSnippte)
    const content = `
    ${clipboard.readSync()}

    ✅ 以上片段已复制到剪贴板!
    `
    console.log(
      chalk.green(
        boxen(content, { padding: 1, margin: 1, borderStyle: 'round' })
      )
    )
  } catch (error) {
    console.log(error)
  }
}

main()
